<template>
  <footer class="footer">
    <span class="todo-count">剩余<strong>数量值{{showArr.length}}</strong></span>
    <ul class="filters">
      <li>
        <a :class="{selected:type==='all'}" @click="$emit('changeType','all')" href="javascript:;" >全部</a>
      </li>
      <li>
        <a :class="{selected:type==='no'}" @click="$emit('changeType','no')" href="javascript:;">未完成</a>
      </li>
      <li>
        <a :class="{selected:type==='yes'}" @click="$emit('changeType','yes')" href="javascript:;" >已完成</a>
      </li>
    </ul>
    <button class="clear-completed" @click="$emit('clearAll')">清除已完成</button>
  </footer>
</template>
<script>
//接收type值，选中不同状态框再传递改变后的type值
export default {
  props:{
    type:String,
    showArr:Array
  }
}
</script>